<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=720">
	<title>Document</title>
	<link rel="stylesheet" href="css/i_want_submission.css">
	<script src="js/mobile-util.js"></script>
</head>
<body>
<!-- 我要投稿 -->
<div class="warp">
    <img id="back" src="images/sys_back.png" alt="">
</div>
<div class='reviewed_title'>
    我要投稿
</div>
<!-- 标题 -->
<div class='problem'>
  <div class='problem_title'>
    <img src='images/title_ti.png' />
    <p>标题</p>
  </div>
  <div class='problem_content'>
     <input value='' id='title' />
  </div>
</div>
<!-- 投稿人 -->
<div class='questions'>
  <div class='questions_title'>
    <image src='images/Contributor.png'></image>
    <p>投稿人</p>
  </div>
  <div class='questions_content'>
     <input value='' id='source' />
  </div>
</div>
<!-- 图片 -->
<div class=' problem_center'>
  <div class='problem_center_title'>
    <img src='images/picture.png' />
    <p>图片</p>
  </div>
  <div class='problem_center_summary'>

     <!-- <img ></img>
     <input type='file' id="image" onclick="save()" style="width:100%;height:100%;bacgorund:red;display:none;"></input> -->

  
<div class="preview_con">
  <!-- <img class="preview_img" src="images/files.png" alt=""> -->
  <input type="file" id="image" onchange="previewImage(this)" />
  <div id="preview">
    <img id="imghead" width=100% height=auto border=0>
  </div>

</div>  


  </div>
</div>
<!-- 文章 -->
<div class=' article_center'>
  <div class='article_center_title'>
    <img src='images/article.png' />
    <p>文章</p>
  </div>
  <div class='article_center_summary'>
    <textarea name="content" id="text" class='input'  placeholder='写点什么吧'></textarea>
  </div>
</div>
<div class='submission' id="submission">
  <button>提交</button>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/i_want_submission.js"></script>
<script src="./lib/layer/layer.js"></script>
<script>
  //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 260; 
          var MAXHEIGHT = 180;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                // img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }

</script>